/**
 * Common part of Checkbox & Radio
 */
import Icon from '../icon';
import {ChildrenMixin} from './relation';
import {addUnit} from '../utils';

export var CheckboxMixin = function CheckboxMixin(_ref) {
    var parent = _ref.parent,
        bem = _ref.bem,
        role = _ref.role;
    return {
        mixins: [ChildrenMixin(parent)],
        props: {
            name: null,
            value: null,
            disabled: Boolean,
            iconSize: [Number, String],
            checkedColor: String,
            labelPosition: String,
            labelDisabled: Boolean,
            shape: {
                type: String,
                default: 'round'
            },
            bindGroup: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            disableBindRelation: function disableBindRelation() {
                return !this.bindGroup;
            },
            isDisabled: function isDisabled() {
                return this.parent && this.parent.disabled || this.disabled;
            },
            iconStyle: function iconStyle() {
                var checkedColor = this.checkedColor || this.parent && this.parent.checkedColor;

                if (checkedColor && this.checked && !this.isDisabled) {
                    return {
                        borderColor: checkedColor,
                        backgroundColor: checkedColor
                    };
                }
            },
            tabindex: function tabindex() {
                if (this.isDisabled || role === 'radio' && !this.checked) {
                    return -1;
                }

                return 0;
            }
        },
        methods: {
            onClick: function onClick(event) {
                var target = event.target;
                var icon = this.$refs.icon;
                var iconClicked = icon === target || icon.contains(target);

                if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
                    this.toggle();
                }

                this.$emit('click', event);
            },
            genIcon: function genIcon() {
                var h = this.$createElement;
                var checked = this.checked;
                var iconSize = this.iconSize || this.parent && this.parent.iconSize;
                return h("div", {
                    "ref": "icon",
                    "class": bem('icon', [this.shape, {
                        disabled: this.isDisabled,
                        checked: checked
                    }]),
                    "style": {
                        fontSize: addUnit(iconSize)
                    }
                }, [this.slots('icon', {
                    checked: checked
                }) || h(Icon, {
                    "attrs": {
                        "name": "success"
                    },
                    "style": this.iconStyle
                })]);
            },
            genLabel: function genLabel() {
                var h = this.$createElement;
                var slot = this.slots();

                if (slot) {
                    return h("span", {
                        "class": bem('label', [this.labelPosition, {
                            disabled: this.isDisabled
                        }])
                    }, [slot]);
                }
            }
        },
        render: function render() {
            var h = arguments[0];
            var Children = [this.genIcon()];

            if (this.labelPosition === 'left') {
                Children.unshift(this.genLabel());
            } else {
                Children.push(this.genLabel());
            }

            return h("div", {
                "attrs": {
                    "role": role,
                    "tabindex": this.tabindex,
                    "aria-checked": String(this.checked)
                },
                "class": bem({
                    disabled: this.isDisabled,
                    'label-disabled': this.labelDisabled
                }),
                "on": {
                    "click": this.onClick
                }
            }, [Children]);
        }
    };
};